import React, { useEffect, useState } from 'react'
import { List, Typography } from 'antd';

import styles from './index.module.css'
import { getStyle } from 'antd/es/checkbox/style';

const data = [
    'Racing car sprays burning fuel into crowd.',
    'Japanese princess to wed commoner.',
    'Australian walks 100km after outback crash.',
    'Man charged over missing wedding girl.',
    'Los Angeles battles huge wildfires.',
    'Australian walks 100km after outback crash.',
    'Man charged over missing wedding girl.',
    'Los Angeles battles huge wildfires.',
];


function Test02() {

    //当前点击的item
    const [curreItemIndex, setCurreItemIndex] = useState(-1);

    //[]空数组相当于componentDidMount
    useEffect(() => {
        initData()
        return () => {

        }
    }, []);

    function initData() {


    }

    function clickItem(i) {
        console.log('点击了item', i);
        setCurreItemIndex(i)
    }

    function getStyle(index) {
        console.log('getStyle', index);
        if (curreItemIndex === index) {
            return styles.item1
        } else {
            return styles.item
        }
    }



    return (
        <div className={styles.root}>
            <span>11111</span>
            <List
                header={<div>Header</div>}
                footer={<div>Footer</div>}
                bordered
                dataSource={data}
                renderItem={(item, index) => (
                    <div className={getStyle(index)} onClick={() => (clickItem(index))}>
                        <Typography.Text mark>[ITEM]</Typography.Text> {item}
                    </div>
                )}
            />
        </div>
    )
}

export default Test02;
